iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
3
Modern Web

初探Vue.js 30天系列 第 10

[Day 10] Computed 計算屬性 Setter/Getter

  • 分享至 

  • xImage
  •  

computed介紹

  • computed 中譯是計算,顧名思義是將複雜、重複的邏輯抽離,並使用computed處理。
    在 Vue 中透過 computed 會 cache 住沒有改變的資料,因此正確且適當的使用 computed 將可以減少資料重新運算的次數,讓網頁的效能提升。
    https://ithelp.ithome.com.tw/upload/images/20200924/20108252aMXrHzCRVF.jpg

  • 在 Vue 中,computed 的屬性可以被視為像是 data 一樣,可以讀取和設值,因此在 computed 中可以分成 getter(讀取) 和 setter(設值),在沒有寫 setter 的情況下,computed 預設只有 getter ,也就是只能讀取,不能改變設值。

  • 雖然 computed 內的屬性可以被視為像是 data 一樣,但在使用上,一般還是會讓 computed 類似唯讀的狀態,也就是去處理 data 資料,然後把它吐出來使用。

  • 在 getter 中,要記得搭配使用 return 來把值返回出來。

以下利用computed計算data items陣列長度的演練

<div id="app">
    <p>{{ arrayLength }}</p>
</div>
let app = new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3]
  },
	computed: {
        arrayLength() {
          return 'The items length is ' + this.items.length
        }
    }
})

getter & setter

預設 Computed 是 getter,也就是一般情況下computed的值只能讀取不能更改。
但在一些例子下你可以加上 setter 做更改處理。

<template>
  <input type="text" v-model="average">
  <ul>
    <li>{{ english }}</li>
    <li>{{ math }}</li>
    <li>{{ average }}</li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
        english: 100,
        math: 80,
      }
    },
    computed: {
      average: {
        // getter: 當english或math數值異動時候,會重新計算average並cache起來
        get() {
          return (this.english + this.math) / 2
        },
        // setter: 當 computed 的屬性要被設值時,就會觸發 setter 去處理的事情
        set(newValue) {
          if (newValue < 60){
              this.english = this.english + 30;
              this.math = this.math + 30;
          }
        },
      },
    },
  }
</script>

getter

當網頁初始化時,會綁定computed變數名稱,去計算變數的值,因computed依賴於。

setter

input 是直接绑 v-model="average",如果我们直接修改了average的值,就會觸發setter,再依序觸發getter以及updated。

觸發的順序

setter -> getter -> update

Computed vs Methods

Methods也可以做到跟Computed一樣的事情,但Computed有個cache的特性,當相依的變數沒有變化時,就不會重新計算!
而Methods不管資料有沒有變動,每次都需要重新計算,效能比Computed差。

Computed vs Watch

Computed 是根據依賴的值變更時做計算,Watch 則是監聽「一個值」變更而做接下來的程序。
Computed 經由依賴的值變化後,計算出一個結果 ( 多對一 ) ,而 Watch 則是監聽一個值的變化,利用waatch到的值變化後,去做邏輯 ( 一對多 ) 。

沒有比較沒有傷害 /images/emoticon/emoticon01.gif/images/emoticon/emoticon01.gif

Resource
[Vue] 還是不懂 Computed ?
Computed 中 getter 和 setter 觸發的時間點


上一篇
[Day 9] Watch 逃不過的監聽
下一篇
[Day 11] Component 認識元件
系列文
初探Vue.js 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言